<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style lang="less">
// 引入主题
@import "./assets/theme/theme.less";

// 引入第三方icon
@import "https://at.alicdn.com/t/font_928781_fr3aqstpunn.css";
/* 侧导航栏样式控制
 *
 * 因为在原文件中修改未能达成想要的效果故在app.vue中修改
 */
// 1. icon的默认大小
.iconfont {
  font-size: 24px;
  margin-right: 0 10px;
}
// 2. 侧导航栏下拉三角颜色
.el-submenu__title i {
  color: #ffffff !important;
}
// 3. 侧导航栏下拉icon默认颜色
.el-menu-item i {
  color: @navTextColor;
}

/* 页面公共的顶部操作样式 
 *
 * 页面的顶部样式用于操作页面的数据,可有可无
 */
.operationTop {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 125px;
  left: 250px;
  z-index: 100;
  width: calc(100% - 265px);
  box-sizing: border-box;
  padding-top: 10px;
  padding-left: 15px;
  background-color: rgba(255, 255, 255, 0.6);
  .btnColor {
    background-color: #3a8ee6 !important;
    color: #ffffff !important;
  }
}
@media screen and (max-width: 1366px) {
  .operationTop {
    width: calc(100% - 80px) !important;
    left: 65px !important;
    padding-right: 15px;
  }
}
/* 页面公共的底部操作样式 
 *
 * 一般应用于操作表内数据以及分页
 */
.operationBottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

/* 数据列表表格样式 */
@blackTable: #ccc;
@blackTable_tdFontColor: #333;
@blackTable_thFontColor: #409eff;
.operationTable {
  height: 100%;
  border: 1px solid @blackTable;
  // 表格内文字
  .el-table td > .cell {
    text-align: center !important;
    color: @blackTable_tdFontColor !important;
  }
  td {
    border-bottom: 1px solid @blackTable !important;
    border-right: 1px solid @blackTable !important;
  }
  // 表头样式
  th {
    border-bottom: 1px solid @blackTable !important;
    border-right: 1px solid @blackTable !important;
  }
  .el-table th > .cell {
    text-align: center !important;
    color: @blackTable_thFontColor !important;
  }
  // 重置按钮的默认样式,取消边距
  .resetBtn {
    font-size: 14px;
    font-weight: bold !important;
    text-decoration: underline;
    padding: 0 !important;
  }
  // 按钮的删除样式
  .del {
    color: #f56c6c !important;
  }
}

/* JS形式的控制表格样式 */
.danger-row {
  background-color: #fab6b6 !important;
  text-align: center !important;
}
.success-row {
  background-color: #f0f9eb !important;
  text-align: center !important;
}
.warn-row {
  background-color: oldlace !important;
  text-align: center !important;
}
.default-row {
  text-align: center !important;
}

/* css简单的公共样式 */
.blue {
  color: #409eff;
}
.green {
  color: #67c23a;
}
.yellow {
  color: #e6a23c;
}
.red {
  color: #f56c6c;
}
.gray {
  color: #909399;
}
a {
  text-decoration: none;
}
.textRight {
  text-align: right;
}
.textLeft {
  text-align: left;
}
.textCenter {
  text-align: center;
}
/* 清除浮动 */
.clearFloat:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearFloat {
  zoom: 1;
}
</style>
